<template>
    <view class="pub_page pub_local pub_header_padding pub_tabbar_padding">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <pub-tabbar :active="1"></pub-tabbar>
        <div class="pub_page_scroll page_box">
            <div class="top_div">
                <div class="address_box">
                    {{ locationInfo?locationInfo.address.city:'--' }}
                    <div class="icon icon-font-basic icon-b-arrow-4-3"></div>
                </div>
                <div class="search_box">
                    <pub-search :btnType="0" placeholder="请输入你想找的商家/产品" ></pub-search>
                </div>
            </div>
            <div class="img_div"></div>
            <div class="lists_div">
                <div class="tab_box">
                    <div class="li" :class="[tabId===key?'li_active':'']" v-for="(li,key) in tabList" :key="key"
                        @click="tabClick(li)">{{ li }}</div>
                </div>
                <div class="pub_nodata_1">敬请期待</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '本地拼团',//标题栏内容
                left_type: 0,
                title_color: '#000',
                header_color: '',
            },

            locationInfo: '',

            tabList: ['附近', '美食', '服装', '娱乐', '健康'],
            tabId: 0,
        };
    },
    onLoad() {
        this.getLocationInfo();
    },
    methods: {
        tabClick(){},
        getLocationInfo() {
            // 获取当前位置信息
            // #ifdef APP-PLUS
            this.getUserLocation();
            // #endif
            // #ifdef H5
            this.locationInfo = {
                latitude: 30.513494,
                longitude: 104.060066,
                address_txt: '四川省 成都市 双流区',
                address: {
                    country: "中国",
                    province: "四川省",
                    city: "成都市",
                    district: "双流区",
                    street: "安公路",
                    streetNum: "3段-422",
                    cityCode: "75"
                },
            }
            // #endif
        },
        async getUserLocation() {
            const that = this;
            // result 1=>已获取授权  0=>未获取授权-1=>被永久拒绝授权
            const result = await this.$permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION');
            console.log("result:", result);
            if (result == 1) {
                uni.getLocation({
                    type: 'gcj02',
                    geocode: true,
                    success: function (res) {
                        console.log(res);
                        that.locationInfo = {
                            latitude: res.latitude,
                            longitude: res.longitude,
                            address_txt: `${res.address.province} ${res.address.city} ${res.address.district}`,
                            address: res.address,
                        };
                    }
                });
            } else {
                // this.dialogConfig = {
                //     title: '提示',//标题栏内容
                //     content: '请先获取定位信息再进入APP',
                //     btn_list: [{
                //         txt: '已设置',
                //         color: '#555',
                //         bg_1: '#e8e8e8',
                //         bg_2: '#eee',
                //     }, {
                //         txt: '去设置权限',
                //         color: '#fff',
                //         bg_1: '#31A5FF',
                //         bg_2: '#0974FF'
                //     }]
                // };
                // this.dialogShow = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.pub_local {
    background: url("@/static/bimg/img_36.png") top center no-repeat #F1F3F3;
    background-size: 100vw auto;

    .top_div {
        width: 100%;
        display: flex;
        height: 80rpx;
        padding: 0 32rpx;

        .address_box {
            padding: 0 30rpx 0 0;
            display: flex;
            align-items: center;

            .icon {
                font-size: 28rpx;
                margin: 0 0 0 8rpx;
            }
        }

        .search_box {
            flex: 1;

            .pub_search {
                border-radius: 40rpx;
                padding-left: 40rpx;
                background: url("@/static/bimg/img_37.png") left 20rpx center no-repeat #fff;
                background-size: 32rpx auto;
            }
        }
    }

    .img_div {
        width: 100%;
        height: 300rpx;
        background: url("@/static/bimg/img_38.png") right 24rpx center no-repeat, url("@/static/bimg/img_39.png") left 32rpx center no-repeat;
        background-size: 260rpx auto, 410rpx auto;
    }

    .lists_div {
        width: calc(100% - 48rpx);
        margin: 0 auto;
        background: #fff;
        border-radius: 24rpx;
    }

    .tab_box {
        display: flex;
        overflow-x: auto;
        height: 90rpx;
        padding: 16rpx 24rpx 0 24rpx;

        .li {
            flex: 0 0 auto;
            height: 50rpx;
            line-height: 50rpx;
            color: #3D3D3D;
            font-size: 32rpx;
            position: relative;
            margin: 0 48rpx 0 0;
            font-weight: 700;
            padding: 0 14rpx;
        }

        .li:last-child {
            margin: 0;
        }

        .li_active {
            color: #E62017;
        }

        .li_active::before {
            width: 100%;
            height: 4rpx;
            border-radius: 2rpx;
            background-color: #E62017;
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
        }
    }

    .tab_box::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }
}
</style>
